<template>
  <div class="h-full grid gap-[20px]" :class="containerClass">

    <!-- 项目概况 -->
    <projectoverview v-if="storeType ==1"/>
    <!-- 设备概况 -->
    <equipmentprofile/>
    <!-- 设备统计 -->
    <devicestatistics/>

    <alarmTrend/>

  </div>
</template>
<script setup lang="ts">

import projectoverview from './component/project-overview.vue';
import devicestatistics from './component/device-statistics.vue';
import alarmTrend from "./component/alar-trend.vue"
import equipmentprofile from "./component/equipment-profile.vue"
import {useDataDashboardThemeStore} from '@/store/modules/data-dashboard-theme'

const storeType = useDataDashboardThemeStore().dataDashboardType

const containerClass = storeType === 1 ? 'grid-rows-[minmax(152px,1fr)_minmax(236px,1fr)_minmax(244px,1fr)_minmax(268px,1fr)]' :
  'grid-rows-[minmax(236px,1fr)_minmax(244px,1fr)_minmax(420px,1fr)]'
</script>
